<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>华农宠物收容所—成为志愿者</title>
    <link rel="shortcut icon" href="../PetHome.ico" type="image/x-icon">
    <meta name="description" content="华农专属宠物救助网站">
    <meta name="keywords" content="网站救助、华南农业大学、宠物救助中心、宠物收容所、猫狗救助中心、给每一个流浪宠物一个家">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">

    <!-- elementUI引入 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
   
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
    <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
    <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="../CSS/Bevolunteer.css">
    <link rel="stylesheet" href="../fontContent/font/iconfont.css">
    <link rel="stylesheet" href="../viewshell/jarallax.css">
    <script src="../JS/jQuery.min.js"></script>

</head>
<body>
    
    <!-- 导航栏目条 -->
    <!-- 响应式布局 在媒体最大宽度小于763px时 自动实现导航栏右移动 -->
    <nav id="loginBox">
        <!-- mask登录需要作为背景强调登陆框 -->
        <div class="mask"></div>
            <div class="logo">宠物收容所</div>
            <ul class="nav-menu">
                <li><a href="index.html">首页</a></li>
                <li><a href="AdoptionCenter.html">领养中心</a></li>
                <li><a href="PetKnowledge.html">宠物知识</a></li>
                <li><a href="TeamActivities.html">团队活动</a></li>
                <li class="current"><a href="BeVolunteer.html">成为志愿者</a></li>
                <li><a href="Donate.html">捐助</a></li>
            </ul>
            <div  class="nav-login" v-show="user_id">
            <div class="Avater">
                <ul>
                <li><img :src="logginMessage.user_avater_url" alt=""></li>
                <li><div>{{this.logginMessage.userlogin_name}}</div></li>
                <li><div><a href="userCenter.html">用户中心</a></div></li>
                <li @click="outLogin">退出登录</li>
                </ul>
            </div>
            </div>
    
    
    
    
            <div class="nav-login" v-show="!user_id" @click="Loginhandle">
                <ul>
                    <li><a href="javascript:;">
                        <span class="iconfont icon-yonghu-yuan" style="font-size:30px;"></span>
                    </a></li>
                    <li><a href="javascript:;">登录/注册</a></li>
                </ul>
            </div>
    
            <div class="login-box">
            <div class="Login">
                <div class="owl" id="owl">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                    <div class="arm"></div>
                    <div class="arm arm-r"></div>
                    </div>
                </div>
    
            <span class="iconfont icon-guanbi1" id="closeBtn"></span>
                <img src="../images/touxiang.png" id="avatar" alt="">
            <form action="">
                <div>
                    <span class="iconfont icon-yonghu"></span>
                    <input type="text" placeholder="用户名" v-model.trim="logginMessage.userlogin_name">
                </div>
                <div>
                    <span class="iconfont icon-ttubiao_password"></span>
                    <input type="password" id="password" placeholder="密码" v-model="logginMessage.userlogin_password">
                </div>
                
                <!-- <button @click="loginButton">提交</button> -->
                <span @click="loginButton" style="color: #fff;
                background-color: #20b2aa;
                height: 50px;
                width: 150px;
                text-align: center;
                font-size: 1.2rem;
                line-height: 50px;
                border-radius: 3px;
                ">提交我</span>
            </form>
            <div id="GoRegister">没有账号？去注册<span class="iconfont icon-youjiantou"></span></div>
            </div>
    
    
            <div class="Register"  style="display: none;">
    
                <div class="owl" id="reowl">
                    <div class="hand"></div>
                    <div class="hand hand-r"></div>
                    <div class="arms">
                    <div class="arm"></div>
                    <div class="arm arm-r"></div>
                    </div>
                </div>
    
                <span class="iconfont icon-guanbi1" id="closeBtn"></span>
                <img src="../images/touxiang.png" id="avatar" alt="">
                <el-row>
                <el-col>
                    <el-form 
                    status-icon 
                    :inline="true" 
                    label-width="0px" 
                    :model="registerMessage" 
                    ref="registerMessage" 
                    class="demo-ruleForm" 
                    :rules="rules" 
                    
                    >
                        <div>
                            <span class="iconfont icon-email"></span>
                            <el-form-item label="" prop="user_email">
                            <el-input placeholder="你的邮箱" v-model.trim="registerMessage.user_email" ></el-input>
                            </el-form-item>
                            <span class="iconfont icon-dianhua"></span>
                            <el-form-item label="" prop="user_phone">
                            <el-input placeholder="你的电话"  v-model.trim="registerMessage.user_phone"></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <span class="iconfont icon-yonghu"></span>
                            <el-form-item label="" prop="user_name">
                                <el-input placeholder="用户名"  v-model.trim="registerMessage.user_name"></el-input>
                            </el-form-item>
                            <span class="iconfont icon-dizhi"></span>
                            <el-form-item label="" prop="user_address">
                                <el-input placeholder="地址"  v-model.trim="registerMessage.user_address"></el-input>
                            </el-form-item>
                        
                        </div>
                        <div>
                            <span class="iconfont icon-ttubiao_password"></span>
    
                            <el-form-item label="" prop="user_password">
                            <el-input placeholder="密码" 
                            autocomplete="off" 
                            id="registerpass1" 
                            v-model="registerMessage.user_password" 
                            type="password" 
                            show-password
       
                            ></el-input>
                            </el-form-item>
                            <span class="iconfont icon-ttubiao_password"></span>
    
                            <el-form-item label="" prop="user_password_again">
                            <el-input placeholder="再次输入密码" 
                            autocomplete="off" 
                            id="registerpass" 
                            v-model="registerMessage.user_password_again" 
                            type="password" 
                            show-password
                            
                            
                            ></el-input>
                            </el-form-item>
                        </div>
                        <div>
                            <el-input
                            style="
                            height: 10vh;
                            "
                            type="textarea"
                            placeholder="介绍一下自己吧"
                            v-model="registerMessage.user_info"
                            maxlength="60"
                            show-word-limit
                            style="font-size: 1.5rem;
                                height: 15vh;
                            "
                            >
                            </el-input>
                        </div>
                        <div style="color: #000;">
                            <template>
                            是否有过领养经历：<el-radio value="0" name="isadopted" v-model="registerMessage.user_adopt_history" label="1">否</el-radio>
                            <el-radio value="1" name="isadopted" v-model="registerMessage.user_adopt_history" label="2">是</el-radio>
                            </template>
                        </div>
            <div style="color: #000;
            border: 1px #ccc solid;
            ">
            
            <el-upload
                class="upload-demo"
                drag
                action="http://karrysmile.top/PetShelter/photo/uploadPhoto"
                name="imgFile"
                :on-success="uploadSuccess"
                :before-upload="beforeUpload"
                multiple 
                
                >
                <img v-if="registerMessage.user_photo" :src="registerMessage.user_photo" alt="">
                <i v-else class="el-icon-upload"
                style="
                    font-size: 67px;
                    color: #C0C4CC;
                    margin: 16px 0 16px;
                    line-height: 50px;
                "
                >
                <div class="el-upload__text">将头像文件拖到此处，或<em>点击上传</em></div>
                <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
            </i>
                
            </el-upload>
            </div>
            
            <div>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('registerMessage')"
                        style="width: 15vw;"
                    >提交</el-button>
                    <el-button @click="resetForm('registerMessage')"
                        style="width: 15vw;"
                    >重置</el-button>
                </el-form-item>
            </div>
    
                    </el-form>
                </el-col>
                </el-row>
                <div id="GoLogin">已有账号？去登录<span class="iconfont icon-youjiantou"></span></div>
            </div>
    
            </div>
             <div class="burger">
                 <div class="top-line"></div>
                 <div class="middle-line"></div>
                 <div class="bottom-line"></div>
             </div>
    </nav>
    <!-- 网页内容 -->


    <!-- 网页内容设计结束 -->
    <div class="content-wrapper" id="webcontent">
        <div class="viewShow">
            <section>
                <div class="box">
                    <h2 data-jarallax-element="0 -200" >2016年，最重要的决定。。。</h2>
                    <div class="container">
                        <div class="imgBx jarallax">
                            <img src="../images/Bevolunteer-images/banner3.png" class="jarallax-img">
                        </div>
                        <div class="content" data-jarallax-element="-200 0">
                            <p>
                                &nbsp;
                               也许是一时冲动，也可以说是自己发自内心对动物的关爱，
                               在那个宣传月之后，我们一起成立了流浪动物志愿者协会 
                            </p>
                        </div>
                    </div>
                </div>
            </section>
            <section>
                <div class="box">
                    <h2 data-jarallax-element="0 200" >志愿的时光流逝得很快</h2>
                    <div class="container">
                        <div class="imgBx jarallax">
                            <img src="../images/Bevolunteer-images/banner7.jpg" class="jarallax-img">
                        </div>
                        <div class="content" data-jarallax-element="-200 0">
                            <p>
                                &nbsp;
                                其实，和我幻想中的志愿者并不一样，电视里去给狗狗当志愿者都看起来很美好，和狗狗一起玩耍，其实不是，我每天唯一和狗狗能玩耍的时间只有它们饭后休息的时候，甚至它们都是变吃饭边拉肚子，得及时清理，防止撒尿把地弄湿，造成皮肤病。
                                <br>

                            </p>
                        </div>
                    </div>
                </div>
            </section>
            <section>
                <div class="box">
                    <h2 data-jarallax-element="0 -200" >一看到志愿者 还各种卖萌撒娇 求摸摸求抱抱</h2>
                    <div class="container">
                        <div class="imgBx jarallax">
                            <img src="../images/Bevolunteer-images/Volunteer6.jpg" class="jarallax-img">
                        </div>
                        <div class="content" data-jarallax-element="-200 0">
                            <p>做志愿的日子是挺累的，几乎每一天都是拖着疲惫的身子回家。
                                <br>
                                但是，也是在每天遇到这些小动物的时候，他们开心的叫唤着欢呼着我们到来，再累的心情也会被这温馨的一幕融化，算是苦中做乐吧</p>
                        </div>
                    </div>
                </div>
            </section>
            <section>
                <div class="box">
                    <h2 data-jarallax-element="0 200" >收容所阿姨对我们的赞扬</h2>
                    <div class="container">
                        <div class="imgBx jarallax">
                            <img src="../images/Bevolunteer-images/Volunteer4.jpg" class="jarallax-img">
                        </div>
                        <div class="content" data-jarallax-element="-200 0">
                            <p>“之前有人在这边帮忙照料，这些孩子的猫舍犬舍都是非常干净的，现在只有几个志愿者和徐阿姨在这边大多数是忙不过来的。真的很感谢这些志愿者他们不图回报每天都来，为的就是这帮毛孩子。”</p>
                        </div>
                    </div>
                </div>
            </section>
            <section>
                <div class="box">
                    <h2 data-jarallax-element="0 -200" >当然，我们的人手还不够</h2>
                    <div class="container">
                        <div class="imgBx jarallax">
                            <img src="../images/Bevolunteer-images/banner6.png" class="jarallax-img">
                        </div>
                        <div class="content" data-jarallax-element="-200 0">
                            <p>如果有一天，另一个生命即将进入你的生活，请扪心自问，你是不是可以对它做出一生的承诺，这已不是感情所能衡量的，这是你对一个一生只有你一人的朋友，最基本的责任。希望有更多的人加入我们的志愿者协会！！！</p>
                        </div>
                    </div>
                </div>
            </section>
        </div>
        
        <div class="become" id="Bevolunteer">
            <div class="content">
                <div class="left">
                    <img src="../images/Bevolunteer-images/become.jpg" alt="">
                </div>
                <div class="right">
                    <h1>成为我们的志愿者</h1>
                    
                    
                    <form>
                        <h2>填表说明：</h2>
                        <h3>1.后面添加“*”为必填内容，请填写完整  </h3>
                        <h3>2.填写完毕后，我们会在两到三个工作日内与您联系。</h3>
                        <h3>联系人：</h3>
                        <input v-model="volunteerMessage.v_name" type="text">
                        <h3>联系电话：</h3>
                        <input v-model="volunteerMessage.v_number" type="text">
                        <h3>联系邮箱：</h3>
                        <input v-model="volunteerMessage.v_email" type="text">
                        <h3>您的志愿需求：</h3>
                        <input v-model="volunteerMessage.v_demand" type="text">
                        <h3>备注：</h3>
                        <input v-model="volunteerMessage.v_postscript" type="text">
                        <br>
                        
                        <input @click="postVMessage" id="sub" type="button" value="提交表单">
                    </form>
                </div>
            </div>
            
        </div>

    </div>

    <!-- 以下为网页底部设计  -->
    <footer id="footer">
        <div class="content">
            <div class="top">
                <div class="logo" style="color: #000;">
                    <h1>宠物收容所</h1>
                </div>
            </div>
            <div class="middle">
                <div class="left">
                    <ul>
                        <li style="font-size: 2rem; color: #ccc;">关于我们</li>
                        <li><a href="">公告</a></li>
                        <li><a href="">我们的未来</a></li>
                        <li><a href="">领养帮助</a></li>
                        <li><a href="">信息归档</a></li>
                        <li><a href="">地址：{{webinfo.webinfo_address}}</a></li>
                    </ul>
                    </div>
                    <div class="right">
                    <ul>
                        <li style="font-size: 2rem; color: #ccc;">联系我们</li>
                        <li><a href="">在线客服：{{webinfo.webinfo_phone}}</a></li>
                        <li><a href="">服务监督邮箱：{{webinfo.webinfo_email}}</a></li>
                        <li><a href="">微信公众号：{{webinfo.webinfo_account}}</a></li>
                        <li><a href="">意见反馈</a></li>
                        <li><a href="">免责声明</a></li>
                    </ul>
                    </div>
                    <div class="wechat" style="padding-left: 2vh;">
                    <h2>关注我们</h2>
                    <img style="height: 20vh;" :src="webinfo.webinfo_account_img" alt="">
                        <div><a href="http://karrysmile.top/PetShelter/backend/login.html">管理员登录</a></div>
                    </div>
            </div>
            <div class="bottom">
                <h3>{{webinfo.webinfo_foot}} 备案号：<a href="#">{{webinfo.webinfo_beian}}</a></h3>
            </div>
        </div>
    </footer>
</body>
        
        
<script src="../JS/BeVolunteer.js"></script>
<script src="../viewshell/jarallax.js"></script>
<script src="../viewshell/jarallax-element.js"></script>
<script>
    jarallax(document.querySelectorAll('.jarallax'), {
        speed: 0.5,
    });
</script>

<script src="../JS/axios.js"></script>

<!-- import Vue before Element -->
<script src="../JS/Vue2.js"></script>
<!-- import JavaScript -->
<script src="../JS/OutJs/AdoptionCenter/elementUIindex.js"></script>
</html> 